<template>
	<view class="container pageBg3">
		<!-- <custom-nav-bar></custom-nav-bar> -->
		<view class="fill" :style="{height:navBarHeight()-20 + 'px'}">

		</view>
		<view class="banner" @click="toTest">
			<swiper circular indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff"
				autoplay>
				<swiper-item v-for="item in 6">
					<image :src="'../../static/images/banner/banner'+ item + '.jpg'" mode="aspectFill"></image>
				</swiper-item>

			</swiper>
		</view>
		<view class="contentTitle">
			<image src="../../static/interfaceImages/workbench.png" mode="aspectFill"></image>
			<text>工作台</text>
		</view>
		<view class="content">
			<!-- <scroll-view scroll-x="true" class="study_notes"> -->
			<view class="study_item" @click="toAssay">
				<image src="../../static/interfaceImages/personalCourse.png" mode="aspectFit"></image>
				<view class="icon">作业发布</view>
			</view>
			<view class="study_item" @click="toCourseNote">
				<image src="../../static/interfaceImages/assignment.png" mode="aspectFit"></image>
				<view class="icon">作业提交</view>
			</view>
			<view class="study_item" @click="toHomework">
				<image src="../../static/interfaceImages/studentManage.png" mode="aspectFit"></image>
				<view class="icon">学生管理</view>
			</view>
			<view class="study_item" @click="toStudyPath">
				<image src="../../static/interfaceImages/PPTCreat.png" mode="aspectFit"></image>
				<view class="icon">PPT生成</view>
			</view>
			<view class="study_item" @click="toHistory">
				<image src="../../static/interfaceImages/lessonPlan.png" mode="aspectFit"></image>
				<view class="icon">教案润色</view>
			</view>
			<view class="study_item" @click="toCourse">
				<image src="../../static/images/testHeader/assistant.png" mode="aspectFit"></image>
				<view class="icon">智能助理</view>
			</view>
			<!-- </scroll-view> -->
		</view>


		<view class="">
			<tabbar :selectedIndex="0"></tabbar>
		</view>
		<view class="safe-area-inset-bottom">

		</view>
	</view>
</template>

<script setup>
	import {
		nextTick,
		ref
	} from 'vue'
	import apis from '../../api/apis.js'
	import {
		onReady,
		onShow
	} from '@dcloudio/uni-app'
	import {
		statusBarHeight,
		TitleBarHeight,
		navBarHeight,
		tabBarHeight
	} from '../../utils/system.js'
	onShow(() => {
		nextTick(() => {
			getUserCourse()
		})
	})
	const hasCourse = ref(true)
	// 获取个人课程
	const courseList = ref([])
	const getUserCourse = async () => {
		let res = await apis.getUserCourse().then((res) => {
			courseList.value = res.data
			if (res.data.length === 0) {
				hasCourse.value = false
			} else {
				hasCourse.value = true
			}
		}).catch(err => {
			hasCourse.value = false
		})
	}
	// console.log(hasCourse.value)
	const toAssay = () => {
		uni.navigateTo({
			url: '/pages/my/myindex',

		})
	}
	const toHistory = () => {
		uni.navigateTo({
			url: '/pages/111/111'
		})
	}
	const toCourseNote = () => {
		uni.navigateTo({
			url: "/pages/submit/submit"
		})
	}
	const toHomework = () => {
		uni.navigateTo({
			url: '/pages/work/workindex'
		})
	}
	const toCourse = (id, name) => {
		uni.navigateTo({
			url: "/pages/assistant/assistant"
		})
	}

	const toStudyPath = () => {
		uni.navigateTo({
			url: '/pages/PPT/PPT'
		})
	}
</script>

<style lang="scss" scoped>
	page {
		/* #ifndef APP */
		padding-bottom: calc(env(safe-area-inset-bottom) - 40rpx);
		/* #endif */

		/* #ifndef H5 */
		padding-bottom: var(--window-bottom);
		/* #endif */

	}

	.container {
		height: 100vh;
	}

	.banner {
		width: 750rpx;
		padding: 30rpx 0;

		swiper {
			width: 750rpx;
			height: 340rpx;

			&-item {
				width: 100%;
				height: 100%;
				padding: 0 30rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
		}
	}

		.contentTitle{
			// position: relative;
			padding: 0rpx 30rpx 20rpx 30rpx;
			font-size: 35rpx;
			font-weight: 600;
			display: flex;
			align-items: center;
			image {
				width: 60rpx;
				height: 50rpx;
			}
			
			text{
				padding-left: 10rpx;
			}
		}

	.content {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx;
		// padding: 0rpx 30rpx;
		margin: 10rpx auto;
		width: 80vw;
		height: 50vh;
		// background-color: #fff;
		// border-radius: 20rpx;
		// display: flex;

	}

	.study_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		margin: 0;
		cursor: pointer;
		text-align: center;
		background-color: #fff;

		image {
			width: 100rpx;
			height: 100rpx;
		}

		.icon {
			font-size: 30rpx;
			margin-top: 5px;
			text-align: center;
		}
	}

	.study_item:last-child {
		margin-right: 10rpx;
	}

	.collet,
	.buy,
	.lately_study,
	.download {
		display: flex;
		justify-content: space-between;
	}

	.personalCourse {
		margin-top: 35rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			font-size: 35rpx;
			font-weight: 600;
		}
	}
</style>